/* ============================= */
/* CSS for control sap.m/Button  */
/* BlueCrystal theme             */
/* ============================= */

.sapMBtnGradient(@color) {
	background-color: @color;
	background: -ms-linear-gradient(top, @color 0%, darken(@color, 2) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, @color), color-stop(1, darken(@color, 2)));
	background: -webkit-linear-gradient(top, @color 0%, darken(@color, 2) 100%);
	background: linear-gradient(top, @color 0%, darken(@color, 2) 100%);
}

.sapMBtnInner {
	border-radius:    0.125rem;
	.sapMBtnGradient(@sapUiButtonBackground);
}

.sapMBtnTransparent {
	background-image: none;
	background-color: @sapUiButtonLiteBackground;
	border-color:     @sapUiButtonLiteBorderColor;
	color:            @sapUiButtonLiteTextColor;
}

html.sap-desktop .sapMBtnTransparent > .sapMBtnIcon {
	color:            @sapUiButtonIconColor;
}

.sapMBtn:hover > .sapMBtnTransparent.sapMBtnHoverable {
	background-color: @sapUiButtonLiteHoverBackground;
	border-color:     @sapUiButtonLiteHoverBorderColor;
	color:            @sapUiButtonLiteTextColor;
}

:not(.sapMBtnDisabled) > .sapMBtnTransparent.sapMBtnActive,
:not(.sapMBtnDisabled):hover > .sapMBtnTransparent.sapMBtnActive {
	background-color: @sapUiButtonLiteActiveBackground;
	border-color:     @sapUiButtonLiteActiveBorderColor;
	text-shadow:      none;
}

.sapMIBar-CTX .sapMBtnInner {
	border-color: @sapUiButtonLiteBorderColor;
}

.sapMBar .sapMBtnInner,
.sapMHeader-CTX .sapMBtnInner,
.sapMFooter-CTX .sapMBtnInner,
.sapMSubHeader-CTX .sapMBtnInner {
	background: @sapUiButtonLiteBackground;
}

.sapMBar-CTX :not(.sapMBtnDisabled) > .sapMBtnInner.sapMBtnActive,
.sapMBar-CTX :not(.sapMBtnDisabled) > .sapMBtnInner.sapMBtnTransparent.sapMBtnHoverable.sapMBtnActive {
	color: @sapUiButtonActiveTextColor;
	border-color: @sapUiButtonLiteActiveBorderColor;
}

.sapMIBar-CTX .sapMBtn:hover > .sapMBtnTransparent.sapMBtnHoverable {
	background-color: @sapUiButtonLiteHoverBackground;
	border-color:     transparent;
	color:            @sapUiButtonLiteTextColor;
}

.sapMIBar-CTX .sapMBtn:hover > .sapMBtnHoverable:not(.sapMBtnActive) {
	background-color: @sapUiButtonLiteHoverBackground;
	border-color:     transparent;
	color:            @sapUiButtonHeaderTextColor;
}

.sapMFooter-CTX .sapMBtn:hover > .sapMBtnHoverable:not(.sapMBtnActive) {
	background-color: @sapUiButtonFooterHoverBackground;
	color:            @sapUiButtonFooterTextColor;
}

.sapMFooter-CTX .sapMBtnTransparent :not(.sapMBtnDisabled) {
	color:            @sapUiButtonFooterTextColor;
}

/* ---------------------------------------------------------------------*/
/* Custom focus outline:                                                */
/* ---------------------------------------------------------------------*/

html.sap-desktop .sapMBtn:focus > .sapMFocusable {
	outline:          1px dotted @sapUiContentFocusColor;
	outline-offset:   -3px; /* see the global focus specification */
}

html.sap-desktop .sapMFooter-CTX .sapMBtn:focus > .sapMFocusable,
html.sap-desktop .sapMBtnInverted.sapMBtn:focus > .sapMFocusable,
html.sap-desktop .sapMBtn:focus > .sapMBtnActive.sapMFocusable {
	outline-color:    @sapUiContentContrastFocusColor;
}

html.sap-desktop .sapMBtn:focus > .sapMBtnEmphasized.sapMFocusable {
	outline-color:    @sapUiContentFocusColor;
}
/* ---------------------------------------------------------------------*/
/* Custom focus outline for IE and Edge:                                */
/* ---------------------------------------------------------------------*/

.sapMBtn:focus > .sapMBtnInner.sapMFocusable.sapMIE {
	outline:          none;
	position:         relative;
}

.sapMBtnFocusDiv {
	box-sizing:       border-box;
	position:         absolute;
	left:             1px;
	top:              1px;
	right:            1px;
	bottom:           1px;
	border-radius:    0;
}

.sapMBtn:focus .sapMBtnFocusDiv {
	border:           1px dashed @sapUiContentFocusColor;
}

html.sap-desktop .sapMFooter-CTX .sapMBtn:focus .sapMBtnFocusDiv,
html.sap-desktop .sapMBtn.sapMBtnInverted:focus .sapMBtnFocusDiv,
html.sap-desktop .sapMBtn:focus > .sapMBtnActive > .sapMBtnFocusDiv {
	border-color:    @sapUiContentContrastFocusColor;
}

.sapMBtn:focus > .sapMBtnEmphasized > .sapMBtnFocusDiv {
	border-color:    @sapUiContentFocusColor;
}

/* ---------------------------------------------------------------------*/
/* Disabled and active states:                                          */
/* ---------------------------------------------------------------------*/

.sapMBtnDisabled {
	opacity:          0.5;
}

/* ------------------------------------------------ */
/* Buttons in a Bar                                 */
/* (add separators, remove top/bottom border)       */
/* ------------------------------------------------ */

.sapMFooter-CTX .sapMBtn:hover > .sapMBtnHoverable:not(.sapMBtnActive) {
	text-shadow:      0 1px 0 fade(@sapUiContentShadowColor, 50);
	border-color:     transparent;
}

.sapMFooter-CTX span.sapMBtnInner.sapMBtnEmphasized {
	background-image: none;
	background-color: @sapUiButtonEmphasizedBackground;
	border-color:     @sapUiButtonEmphasizedBorderColor;
	color:            @sapUiButtonEmphasizedTextColor;
	text-shadow:      0 0 0.125rem fade(@sapUiContentShadowColor, 50);
}

.sapMFooter-CTX span.sapMBtnInner.sapMBtnEmphasized > .sapMBtnIcon {
	color:            @sapUiButtonEmphasizedTextColor;
}

.sapMFooter-CTX :not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnEmphasized.sapMBtnActive {
	background-color: @sapUiButtonEmphasizedActiveBackground;
	border-color:     @sapUiButtonEmphasizedActiveBorderColor;
	text-shadow:      none;
}

/* Separators between buttons in a footer */
.sapMTB-Info-CTX > .sapUiIcon:focus {
	outline: 1px dotted @sapUiContentContrastFocusColor;
}

/* Background and text colors for different states */
.sapMFooter-CTX span.sapMBtnInner,
.sapMIBar-CTX.sapMFooter-CTX .sapMBtnInner > .sapMBtnIcon {
	color:            @sapUiButtonFooterTextColor;
	text-shadow:      0 1px 0 fade(@sapUiContentShadowColor, 50);
}

.sapMBar-CTX :not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnTransparent.sapMBtnActive > .sapMBtnContent {
	color: @sapUiButtonActiveTextColor;
}
